<template>
  <div class="home">
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px">
      点我打开
    </el-button>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <span>我来啦!</span>
      <el-input v-model="chapterTitle" placeholder="文章标题"></el-input>
      <div>
        <el-date-picker
          v-model="timer"
          style="width: 95%"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </div>
      <button @click="subform">添加数据</button>
    </el-drawer>
    <h1>{{ message }}</h1>
    <div v-for="item in chapterList" :key="item.chapterId" class="list">
      <span>{{ item.chapterTitle }}</span>
      <span>{{ item.timer }}</span>
      <span>
        <button @click="deleteChapter(item.chapterId)">删除</button>
      </span>
    </div>
    <div>
      <input type="text" v-model="chapter" />
      <button @click="addChapter">添加新闻数据</button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      message: "",
      chapterList: [],
      chapter: "",
      chapterTitle: "",
      timer: "",
      drawer: false,
    };
  },
  /***
   * 页面中调用的方法，或者程序实现逻辑过程中调用的方法
   *
   * */
  methods: {
    subform() {
      console.log(this.chapterTitle, this.timer);
      axios
        .post("http://localhost:3000/subform", {
          chapterTitle: this.chapterTitle,
          timer: this.timer,
        })
        .then((res) => console.log(res));
    },
    getList() {
      axios.get("http://localhost:3000/getlist").then((res) => {
        if (res.status == 200) {
          this.chapterList = res.data;
        }
      });
    },
    deleteChapter(id) {
      axios
        .post("http://localhost:3000/delchapter", {
          id: id,
        })
        .then((res) => {
          if (res.data == "success") {
            let index = "";
            for (let i = 0; i < this.chapterList.length; i++) {
              if (this.chapterList[i].chapterId == id) {
                index = i;
              }
            }
            this.chapterList.splice(index, 1);
          }
        });
    },
    addChapter() {
      axios
        .post("http://localhost:3000/sub", {
          chapterTitle: this.chapter,
          timer: "2023-03-03",
        })
        .then((res) => {
          if (res.data == "ok") {
            this.chapterList.push({
              chapterTitle: this.chapter,
              timer: "2023-03-03",
            });
          }
        });
    },
  },
  mounted() {
    axios.get("http://localhost:3000/getdata").then((res) => {
      let result = res.data;
      this.message = result;
    });
    this.getList();
  },
};
</script>
<style scoped>
.list {
  display: flex;
  justify-content: space-between;
  width: 50%;
  margin: 0 auto;
}
</style>